<template>
  <div class="movieTitle">影片管理</div>
  <el-table :data="pageData.movielist.slice((pageData.current-1)*pageData.pagesize,pageData.current*pageData.pagesize)" style="width: 100%">
    <el-table-column fixed prop="img_url" label="海报" width="150" ><template #default="scope">
              <img :src="scope.row.img_url"  min-width="70" height="120" />
    </template></el-table-column>
    <el-table-column prop="mid" label="电影ID" width="120" />
    <el-table-column prop="chinese_name" label="中文名称" width="120" />
    <el-table-column prop="english_name" label="英文名称" width="120"  show-overflow-tooltip/>
    <el-table-column prop="type" label="影片类型" width="120" />
    <el-table-column prop="length" label="影片时长" width="120" />
    <el-table-column :formatter="formatterTime" prop="release_date" label="上映时间" width="120"/>
    <el-table-column show-overflow-tooltip prop="introduction" label="影片介绍" width="120"/>
    <el-table-column prop="rating" label="评分" width="120" />
    <el-table-column prop="country" label="拍摄国家" width="120" />
    <el-table-column prop="actors" label="演员" width="120"  show-overflow-tooltip />
    <el-table-column prop="director" label="导演" width="120" />
    <el-table-column prop="price" label="价格" width="120" />
    <el-table-column prop="state" label="影片状态" width="120">
      <template #default="scope">
           <span v-if="scope.row.state == 1">已上映</span>
           <span v-else>未上映</span>
      </template>
    </el-table-column>
    <el-table-column fixed="right" width="180">
      <template #header>
         <el-input v-model="moviesearch" size="small" placeholder="中文名称或类型..."/> 
         <el-button size="small" @click="handleSearch()"
          ><el-icon><search /></el-icon
        ></el-button>
        <el-button size="small" @click="handleRef()"
          ><el-icon><refresh /></el-icon
        ></el-button>
        <el-button size="small" @click="handleAdd()"
          ><el-icon><plus /></el-icon
        ></el-button>
         <el-button size="small" @click="handleExport()"
          ><el-icon><download /></el-icon
        ></el-button>
           <el-button size="small" @click="handleUpload()"
          ><el-icon><upload /></el-icon
        ></el-button>
      </template>
      <template #default="scope">
        <el-button
          type="success"
          size="small"
          @click="handleEdit(scope.$index, scope.row)"
          ><el-icon><edit /></el-icon
        ></el-button>
        <el-button
          type="danger"
          size="small"
          @click="handleDelete(scope.$index, scope.row)"
          ><el-icon><delete /></el-icon
        ></el-button>
      </template>
    </el-table-column>
  </el-table>
 <!--添加电影面版 -->
  <el-dialog
    v-model="dialogFormmovieVisible"
    title="添加影片"
  >
    <el-form :model="addmoviedialogData">
      <el-form-item label="海报路径" class="elstyle" label-width="100px" >
        <el-input v-model="addmoviedialogData.img_url" placeholder="填写图片的路径地址"/>
      </el-form-item>
      <el-form-item label="中文名称" class="elstyle" label-width="100px">
        <el-input   v-model="addmoviedialogData.chinese_name"/>
      </el-form-item>
      <el-form-item label="英文名称" class="elstyle" label-width="100px">
        <el-input   v-model="addmoviedialogData.english_name"/>
      </el-form-item>
       <el-form-item label="影片类型" class="elstyle" label-width="100px">
        <el-input   v-model="addmoviedialogData.type"/>
      </el-form-item>
       <el-form-item label="影片时长" class="elstyle" label-width="100px">
        <el-input   v-model="addmoviedialogData.length"/>
      </el-form-item>
       <el-form-item label="上映时间" class="elstyle" label-width="100px" >
        <el-input   v-model="addmoviedialogData.release_date" placeholder="示例：2014-12-03"/>
      </el-form-item>
       <el-form-item label="影片介绍" class="elstyle" label-width="100px">
        <el-input   v-model="addmoviedialogData.introduction"/>
      </el-form-item>
       <el-form-item label="评分" class="elstyle" label-width="100px">
        <el-input   v-model="addmoviedialogData.rating"/>
      </el-form-item>
       <el-form-item label="拍摄国家" class="elstyle" label-width="100px">
        <el-input   v-model="addmoviedialogData.country"/>
      </el-form-item>
       <el-form-item label="演员" class="elstyle" label-width="100px">
        <el-input   v-model="addmoviedialogData.actors"/>
      </el-form-item>
       <el-form-item label="导演" class="elstyle" label-width="100px">
        <el-input   v-model="addmoviedialogData.director"/>
      </el-form-item>
       <el-form-item label="价格" class="elstyle" label-width="100px">
        <el-input   v-model="addmoviedialogData.price"/>
      </el-form-item>
       <el-form-item label="影片状态" class="elstyle" label-width="100px">
        <el-input   v-model="addmoviedialogData.state"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormmovieVisible = false">取消</el-button>
        <el-button type="primary" @click="addMovieInfo">添加</el-button>
      </span>
    </template>
  </el-dialog>

  <!--修改电影面版 -->
  <el-dialog
    v-model="dialogFormmovieUpdateVisible"
    title="编辑影片"
  >
    <el-form :model="updatemoviedialogData">
        <el-form-item label="海报路径" class="elstyle" label-width="100px" >
        <el-input disabled v-model="updatemoviedialogData.img_url" placeholder="填写图片的路径地址"/>
      </el-form-item>
      <el-form-item label="电影ID" class="elstyle" label-width="100px" >
        <el-input  disabled v-model="updatemoviedialogData.mid" />
      </el-form-item>
      <el-form-item label="中文名称" class="elstyle" label-width="100px">
        <el-input disabled  v-model="updatemoviedialogData.chinese_name"/>
      </el-form-item>
      <el-form-item label="英文名称" class="elstyle" label-width="100px">
        <el-input disabled  v-model="updatemoviedialogData.english_name"/>
      </el-form-item>
       <el-form-item label="影片类型" class="elstyle" label-width="100px">
        <el-input   v-model="updatemoviedialogData.type"/>
      </el-form-item>
       <el-form-item label="影片时长" class="elstyle" label-width="100px">
        <el-input   v-model="updatemoviedialogData.length"/>
      </el-form-item>
       <el-form-item label="上映时间" class="elstyle" label-width="100px" >
        <el-input   v-model="updatemoviedialogData.release_date" placeholder="示例：2014-12-03"/>
      </el-form-item>
       <el-form-item label="影片介绍" class="elstyle" label-width="100px">
        <el-input   v-model="updatemoviedialogData.introduction"/>
      </el-form-item>
       <el-form-item label="评分" class="elstyle" label-width="100px">
        <el-input   v-model="updatemoviedialogData.rating"/>
      </el-form-item>
       <el-form-item label="拍摄国家" class="elstyle" label-width="100px">
        <el-input   v-model="updatemoviedialogData.country"/>
      </el-form-item>
       <el-form-item label="演员" class="elstyle" label-width="100px">
        <el-input   v-model="updatemoviedialogData.actors"/>
      </el-form-item>
       <el-form-item label="导演" class="elstyle" label-width="100px">
        <el-input   v-model="updatemoviedialogData.director"/>
      </el-form-item>
      <el-form-item label="价格" class="elstyle" label-width="100px">
        <el-input   v-model="updatemoviedialogData.price"/>
      </el-form-item>
      <el-form-item label="影片状态" class="elstyle" label-width="100px">
        <el-input   v-model="updatemoviedialogData.state"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormmovieUpdateVisible = false">取消</el-button>
        <el-button type="primary" @click="updateMovieInfo">保存</el-button>
      </span>
    </template>
  </el-dialog>
   <!--上传面板 -->
  <el-dialog
    title="上传文件"
    v-model="dialogFormmovieUploadVisible">
  <el-upload
    class="upload-demo"
    drag
    action="http://localhost:8088/Upload"
    :on-success="success()"
    name="aa"
    accept=".xlsx"
    :show-file-list="true"
    :limit="1"
    :multiple="false"
  >
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">
      Drop file here or <em>click to upload</em>
    </div>
    <template #tip>
      <!-- <div class="el-upload__tip">
        jpg/png files with a size less than 500kb
      </div> -->
    </template>
  </el-upload>
  </el-dialog>


    <!--分页 -->
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pageData.current"
    layout="prev, pager, next,total,next,jumper"
    :total="pageData.total"
    :page-size="pageData.pagesize"
  />
</template>

<script lang="ts">
import { Delete, Refresh, Edit, Plus ,Search ,Upload,UploadFilled,Download} from "@element-plus/icons-vue";
import { computed, onMounted, reactive, ref, toRaw, toRefs } from "vue";
import { postAddMovieAPI, postDeleteMovieAPI, postSelectMovieAPI, postUpdateMovieAPI ,getSearchMovieAPI, postExprotAPI} from "../../api/userinfo";
import { ElMessage, UploadProps } from "element-plus";
export default {
  components: { Delete, Refresh, Edit, Plus ,Search,Upload,UploadFilled,Download},
  setup() {
    interface Movie {
      mid?: number;
      chinese_name: string;
      english_name: string;
      img_url: string;
      type: string;
      length: string;
      release_date: string;
      introduction: string;
      rating: string;
      country: string;
      actors: string;
      director: string;
      price:number;
      state:number;
    }
    const moviesearch=ref("")
    let dialogFormmovieVisible=ref(false);
    let dialogFormmovieUpdateVisible=ref(false);
    let dialogFormmovieUploadVisible=ref(false);
    let addmoviedialogData=reactive({
      chinese_name: "",
      english_name:"",
      img_url: "",
      type: "",
      length: "",
      release_date: "",
      introduction: "",
      rating: "",
      country: "",
      actors: "",
      director: "",
      price:0,
      state:0
    })
    const updatemoviedialogData=reactive({
      mid:1,
      chinese_name: "",
      english_name:"",
      img_url: "",
      type: "",
      length: "",
      release_date: "",
      introduction: "",
      rating: "",
      country: "",
      actors: "",
      director: "",
      price:0,
      state:0
    })
    onMounted(() => {
      handleRefs();
    });
    const handleClick = () => {
      console.log("click");
    };
             /**分页 */
    const pageData=reactive({
       current:1,//当前页
       pagesize:4,// 当前页显示多少条
       movielist:ref([]),
       total:0  //总数据
     })
    /**界面 */
    const handleRefs = async () => {
      await postSelectMovieAPI()
        .then((res) => {
          res.data.forEach((element: never) => {
            pageData.movielist.push(element);
          });
          pageData.total = pageData.movielist.length;
        })
        .catch((err: any) => {
          ElMessage.error("加载失败");
        });
    };
    const formatterTime=(row :any,column:any)=>{
      let data = row[column.property];
      return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data);
    }
    const updateMovieInfo=async()=>{
      dialogFormmovieUpdateVisible.value=false;
      await postUpdateMovieAPI({
      mid:updatemoviedialogData.mid,
      chinese_name: updatemoviedialogData.chinese_name,
      english_name:updatemoviedialogData.english_name,
      img_url: updatemoviedialogData.img_url,
      type: updatemoviedialogData.type,
      length: updatemoviedialogData.length,
      release_date: updatemoviedialogData.release_date,
      introduction: updatemoviedialogData.introduction,
      rating: updatemoviedialogData.rating,
      country: updatemoviedialogData.country,
      actors: updatemoviedialogData.actors,
      director: updatemoviedialogData.director,
      price:updatemoviedialogData.price,
      state:updatemoviedialogData.state
      }).then((res) => {
       
          ElMessage({
            message: "更新成功",
            type: "success",
            center: true,
            grouping: true,
          });
          pageData.movielist=[]
          handleRefs();
        })
        .catch((err: any) => {
          ElMessage.error("更新失败");
        });
    }
    const handleRef = async () => {
       pageData.movielist=[]
      await postSelectMovieAPI()
        .then((res) => {
          res.data.forEach((element: never) => {
             pageData.movielist.push(element)
          });
          ElMessage({
            message: "刷新成功",
            type: "success",
            center: true,
            grouping: true,
          });
        })
        .catch((err: any) => {
          ElMessage.error("刷新失败");
        });
    };
        /**按条件搜索 */
    const handleSearch=async()=>{
      await getSearchMovieAPI({
        searchstr :moviesearch.value
      }) .then((res) => {
        pageData.movielist=[]
          if(res.data.length==0){
         ElMessage.error("影片不存在或者查询条件错误");
          }
          else{
              res.data.forEach((element: never) => {
             pageData.movielist.push(element)
          });
          pageData.total=pageData.movielist.length;
          ElMessage({
            message: "查询成功",
            type: "success",
            center: true,
            grouping: true,
          });
          }
        })
        .catch((err: any) => {
          ElMessage.error("查询失败");
        });
    }
    const handleAdd = () => {
      dialogFormmovieVisible.value=true;
    };
    const addMovieInfo=async ()=>{
      await postAddMovieAPI({
      chinese_name: addmoviedialogData.chinese_name,
      english_name:addmoviedialogData.english_name,
      img_url: addmoviedialogData.img_url,
      type: addmoviedialogData.type,
      length: addmoviedialogData.length,
      release_date: addmoviedialogData.release_date,
      introduction: addmoviedialogData.introduction,
      rating: addmoviedialogData.rating,
      country: addmoviedialogData.country,
      actors: addmoviedialogData.actors,
      director: addmoviedialogData.director,
      price:addmoviedialogData.price,
      state:addmoviedialogData.state
      }).then(()=>{
        ElMessage({
            message: "添加成功",
            type: "success",
            center: true,
            grouping: true,
          });
          dialogFormmovieVisible.value=false;
          pageData.movielist=[]
          handleRefs();
        }).catch((err: any) => {
          ElMessage.error("添加失败");
        });
    }
    const handleEdit = (index: number, row: Movie) => {
      dialogFormmovieUpdateVisible.value=true;
      let key: keyof Movie;
      for (key in row) {
        updatemoviedialogData[key] = row[key] as never;
      }
    };
    const handleDelete =async (index: number, row: any) => {
      await postDeleteMovieAPI({
         mid:row.mid
      }
      ).then(() => {
           ElMessage({
            message: "删除成功",
            type: "success",
            center: true,
            grouping: true,
          });
          // tableData.value = [];
          pageData.movielist=[]
          handleRefs();
         
        })
        .catch((err: any) => {
          ElMessage.error("删除失败");
        });
    };
    const handleUpload=()=>{
      dialogFormmovieUploadVisible.value=true;
       
    };
    const handleExport=()=>{
      postExprotAPI().then(()=>{
         ElMessage({
            message: "下载成功",
            type: "success",
            center: true,
            grouping: true,
          });
      })
    }
    const success=()=>{
        pageData.movielist=[]
        handleRefs();
    }
    const handleSizeChange=(value:any)=>{
      pageData.pagesize=value;
      pageData.movielist=[];
      handleRefs();

    }   
    const handleCurrentChange=(value:any)=>{
      pageData.current=value;
      pageData.movielist=[];
      handleRefs();
    }

    return {
      handleSizeChange,
      handleCurrentChange,
      Delete,
      Edit,
      handleClick,
      handleRefs,
      handleRef,
      handleAdd,
      handleEdit,
      handleDelete,
      handleUpload,
      pageData,
      formatterTime,
      addmoviedialogData,
      updatemoviedialogData,
      dialogFormmovieVisible,
      dialogFormmovieUpdateVisible,
      dialogFormmovieUploadVisible,
      addMovieInfo,
      updateMovieInfo,
      moviesearch,
      handleSearch,
      handleExport,
      success
    };
  },
};
</script>
<style scoped>
.movieTitle {
  font-size: 1.5rem;
  margin: 20px 0 10px 0;
}
.introduction{
display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 3;    
overflow: hidden;        
}
.el-table .cell {
  padding: 5px 12px;
}
.el-pagination{
  padding: 50px 10px;
  margin-left: 35rem;
}
.upload{
  margin-left: 200px;
}
.upload-demo{
  text-align: center;
}
</style>
